<template>
  <el-dialog
    :model-value="visible"
    title="添加用户"
    width="800"
    :close-on-click-modal="false"
    @close="cls"
  >
    <div>
      <div class="content">
        <el-form
          :model="user"
          style="max-width: 1200px; margin-top: 20px"
          label-width="150px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名:">
                <el-input
                  v-model="user.name"
                  autocomplete="off"
                  style="width: 300px"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="手机号:">
                <el-input
                  v-model="user.mobile"
                  autocomplete="off"
                  style="width: 300px"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="密码">
                <el-input
                  v-model="user.password"
                  autocomplete="off"
                  style="width: 300px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色:">
                <el-select
                  v-model="user.r_name"
                  style="width: 300px"
                  @change="onRoleChange"
                >
                  <el-option
                    v-for="item in roles"
                    :key="item.id"
                    :label="item.rname"
                    :value="item.rname"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="addCommit"> 提交 </el-button>
      <el-button @click="cls">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { getRole, addUser } from "@/api/user/user.js";
import { ElMessage } from "element-plus";

// 触发父组件关闭事件
const emit = defineEmits(["close", "refreshUserList"]);
const router = useRouter();
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
});
// 本地用户信息u
let user = ref({
  password: "",
  name: "",
  mobile: "",
  role_id: 1,
  r_name: "用户" // 默认角色名称
});

let roles = ref([]);

/**
 * 获取角色列表
 */
async function getRoles() {
  let res = await getRole();
  if (res.code == 200) {
    roles.value = res.data;
  }
}

/**
 * 提交添加用户
 */
async function addCommit() {
  let res = await addUser(user.value);
  if (res.code == 200) {
    ElMessage.success("添加成功！");
    emit("close"); // 通知父组件关闭对话框
    emit("refreshUserList"); // 通知父组件刷新用户列表
    router.push({ path: "/user/userList" });
  } else {
    ElMessage.error("添加失败！");
  }
}

/**
 * 关闭对话框
 */
function cls() {
  emit("close"); // 通知父组件关闭对话框
}

/**
 * 角色选择变化时更新 localUser 的 role_id
 */
function onRoleChange(value) {
  const selectedRole = roles.value.find(role => role.rname === value);
  if (selectedRole) {
    user.value.role_id = selectedRole.id; // 更新 role_id
    user.value.role_name = selectedRole.rname; // 更新 role_name
  }
}

// 初始化加载角色列表
onBeforeMount(() => {
  getRoles();
});
</script>

<style scoped>
.dialog-footer {
  text-align: center;
}
</style>
